<template>
  <div class="filter-bar">
    <div class="item" style="flex: 1"  @click="setOrder('overallScore')">
      <span>综合</span>
      <template v-if="sortProp==='overallScore'">
        <i class="el-icon-caret-top" v-if="sortOrder==='ASC'"></i>
        <i class="el-icon-caret-bottom" v-if="sortOrder==='DESC'" ></i>
      </template>
    </div>

    <div class="item" style="flex: 1"  @click="setOrder('saleNums')">
      <span>销量</span>
      <template v-if="sortProp==='saleNums'">
        <i class="el-icon-caret-top" v-if="sortOrder==='ASC'"></i>
        <i class="el-icon-caret-bottom" v-if="sortOrder==='DESC'"></i>
      </template>
    </div>

    <div class="item" style="flex: 1"  @click="setOrder('price')">
      <span>价格</span>
      <template v-if="sortProp==='price'">
        <i class="el-icon-caret-top" v-if="sortOrder==='ASC'"></i>
        <i class="el-icon-caret-bottom" v-if="sortOrder==='DESC'"></i>
      </template>
    </div>

    <div class="item" style="flex: 2.5">
      <span>分类</span>
      <button @click="chooseClassify()" v-text="currClassify && currClassify.name?currClassify.name:'请选择'">请选择</button>
    </div>

  </div>
</template>

<script>
export default {
  name: 'ProductFilterBar',
  props:{
    classifyParams:Object,
    callback:Function
  },
  data:function () {
    return {
      sortProp:'saleNums',
      sortOrder:'ASC',
      currClassify:{
        id:0,
        name:''
      },
      productCateList:demoData.productCateList,
    }
  },
  mounted () {
    if (this.$props.classifyParams.id){
      this.currClassify.id=this.$props.classifyParams.id
      this.currClassify.name=this.$props.classifyParams.name
    }
  },
  methods:{
    chooseClassify:function () {
      let $this=this
      $this.bus.$emit('ChooseProductClassifyDialogCallBus',$this.currClassify,function (currClassify) {
        if (!currClassify || !currClassify.id){
          currClassify={
            id:0,
            name:''
          }
        }
        $this.currClassify=currClassify
        $this.setCallback()
        $this.$forceUpdate()
      })
    },
    setOrder:function (sortProp) {
      if (sortProp!==this.sortProp){
        this.sortOrder="DESC"
      }else{
        this.sortOrder=this.sortOrder==='DESC'?'ASC':'DESC'
      }
      this.sortProp=sortProp
      this.setCallback()
    },
    setCallback(){
     if (typeof this.callback==='function'){
       this.$props.callback({
         sortOrder:this.sortOrder,
         sortProp:this.sortProp,
         classifyId:this.currClassify.id?this.currClassify.id:0,
         classifyName:this.currClassify.name?this.currClassify.name:'',
       })
     }
    }
  }
}
</script>

<style scoped>

</style>
